<!-- 商品搜索 -->
<template>
	<view class="container">
		<view class="tui-searchbox margin-lr">
			<view class="tui-search-input">
				<icon type="search" :size="13" color="#333"></icon>
				<input placeholder-class="tui-input-plholder" v-model="keyword" class="tui-input" confirm-type="search" :adjust-position="true" :placeholder="defaultKeyword" @input="doSearch" />
				<icon type="clear" :size="13" color="#bcbcbc" @click.stop="clear"></icon>
			</view>
			<view class="tui-cancle" @tap="doSearch(keyword)">搜索</view>
		</view>

		<!--  -->
		<view class="search-keyword" v-if="!isShowKeywordList">
			<!-- 历史搜索 -->
			<scroll-view scroll-y>
				<view class="margin-lr">
					<view class="tui-history-header">
						<view class="tui-search-title">历史搜索</view>
						<view class="tui-icon-delete" @tap="oldDelete">删除</view>
					</view>
					<view class="tui-history-content"><view v-for="(keyword, index) in oldKeywordList" @tap="doSearch(keyword)" :key="index" class="tui-circle round">{{keyword}}</view></view>
				</view>
			</scroll-view>
		</view>

		<!--  @scroll="scroll" 商品列表 -->
		<view v-else>
			<scroll-view scroll-y class="goodscom" :style="{ height: 500 + 'px' }">
				<view ref="foodsWrapper" class="padding-bottom">
					<view class="food u-f-ajc" v-for="(food, index) in goods" :key="index" @click="Route({url: `/pages/common/goodsDetail/goodsDetail?detail=${encodeURIComponent(JSON.stringify(food))}&relations=${encodeURIComponent(JSON.stringify(food.relation))}`})">
						<image :src="food.mainPicture" class="pic radius" mode="aspectFill"></image>
						<view class="food-info u-fc u-f-jsb">
							<text class="title">{{food.productName}}</text>

							<!-- 加减 -->
							<view class="food-btm">
								<view class="spec">
									<text class="food-price">￥{{food.relation.productPrice}}</text>
									<text class="line-through">￥{{food.relation.marketPrice}}</text>
								</view>
							</view>
						<view class="u-f-jsb">
							<text class="del">
								<text>销量{{food.relation.soldStock}}</text>
								<text class="productStock" v-if="food.relation.productStock<10">仅剩{{food.relation.productStock}}件</text>
								<text class="productStock" v-if="food.relation.productStock ==0">暂时缺货</text>
							</text>
							<view><cart-control :food="food" :carList="carList" @cartChange="handelCart"></cart-control></view>
						</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<tui-no-data imgUrl="https://sbb-sbb.oss-cn-shenzhen.aliyuncs.com/static/images/my-img/img_nodata.png" v-if="false" :fixed="true">暂无内容</tui-no-data>
			<shop-cart v-if="carList.length" :goods="carList" @delAll="delAll" @change="handelCart" bottom='0'></shop-cart>
		</view>
	</view>
</template>

<script>
import cache from '@/common/js/utils/cache.js'
import Vue from 'vue';
export default {
	data() {
		return {
			carList:[],
			goods: [], //商品列表
			currentPage: 0,
			total: 0,
			loadMore: false,
			noMoreFlag: false,
			noData1: false,
			keyword: '',       //商品名称
			isShowKeywordList: false,    //关键词显示
			oldKeywordList: [],
			defaultKeyword: '新鲜水果'
		};
	},
	onLoad() {
		this.loadOldKeyword();
	},
	onShow() {
		this.carList = this.$store.state.carList || [];
		this.goods.forEach(pro => {
			// 购物车为空
			if (this.carList.length == 0) {
				pro.count = 0;
			} else {
				// 钩吻车不为空，遍历购物给商品count赋值
				this.carList.forEach(car => {
					if (pro.id == car.id) {
						pro.count = car.count;
					}
				});
			}
		});
	},
	methods: {
		getProducts(productName) {
			this.loadMore = true;
			this.$http.post('/api/search/products/pageByName', {productName, currentPage: this.currentPage }, { header: { authType: 'false' } }).then(res => {
				this.loadMore = false;
				if(!res.success) return this.$tip.toast(res.msg)
				this.total = res.data.total;
				if (this.total == 0) return (this.noData1 = true);
				res.data.rows.forEach(item => {
					Vue.set(item, 'count', 0);
					if (!this.carList) return;
					// 遍历购物车给商品列表赋值
					this.carList.forEach(car => {
						if (item.id == car.id) {
							item.count += car.count;
						}
					});
				});
				this.goods = [...this.goods, ...res.data.rows];
			});
		},
		handelCart(item) {
			this.carList = this.$store.state.carList;
			this.goods.forEach(pro => {
				if (pro.id == item.id) {
					pro.count = item.count;
				}
			});
		},
		// 清空购物车
		delAll() {
			this.carList = [];
			this.goods.forEach(item => {
				item.count = 0;
			});
		},
		// 以下是搜索所有内容!!!!
		clear: function() {
			uni.hideKeyboard();
			this.keyword = '';
			this.isShowKeywordList = false;
		},
		//加载历史搜索,自动读取本地Storage
		loadOldKeyword() {
			uni.getStorage({
				key: 'productSeach',
				success: res => {
					var OldKeys = JSON.parse(res.data);
					this.oldKeywordList = OldKeys;
				}
			});
		},
		//清除历史搜索
		oldDelete() {
			uni.showModal({
				content: '确定清除历史搜索记录？',
				success: res => {
					if (res.confirm) {
						// 用户点击确定
						this.oldKeywordList = [];
						uni.removeStorage({
							key: 'productSeach'
						});
					} else if (res.cancel) {
						// 用户点击取消
					}
				}
			});
		},
		//执行搜索
		doSearch(keyword) {
			keyword = keyword.detail?  keyword.detail.value : keyword;
			keyword = keyword === '' ? this.defaultKeyword : keyword;
			this.isShowKeywordList = true;
			this.keyword = keyword;
			this.save()
			this.getProducts(keyword);
		},
		save() {
			this.keyword ? this.saveKeyword(this.keyword) : '';
		},
		//保存关键字到历史记录
		saveKeyword(keyword) {
			let that = this
			cache.putByLimit('productSeach',keyword,function(res){
				that.oldKeywordList =  res
			})
		},
	}
};
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}
.container {
	padding-bottom: 100upx;
	// background-color: #FFFFFF;
	min-height: 100%;
}
uni-page {
	background-color: #ffffff;
}
// 商品
.food {
	margin: 28upx 50upx;
	.pic {
		width: 200upx;
		height: 200upx;
		display: block;
		flex-shrink: 0;
	}
	.food-info {
		margin-left: 20upx;
		flex: 2;
		.title {
			font-size: 30upx;
			font-weight: bold;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
		.sub {
			font-size: 24upx;
		}
		.del {
			font-size: 20upx;
			color: #888888;
			margin: 12rpx 0;
		}
		.food-btm {
			position: relative;
			font-size: 20upx;
			display: flex;
			justify-content: space-between;
			.spec {
				& > text {
					margin-right: 10upx;
				}
			}
			.text-cut {
				background-color: $main-color;
				color: #ffffff;
				width: 120upx;
				height: 50upx;
				line-height: 50upx;
				text-align: center;
				font-size: 20upx;
			}
			.count {
				position: absolute;
				height: 40rpx;
				background-color: $main-color;
				color: #fff;
				min-width: 40rpx;
				line-height: 40rpx;
				text-align: center;
				border-radius: 40rpx;
				right: 0;
				bottom: 36rpx;
			}
		}
	}
}
.food-price {
	color: #f22222;
	font-size: 36upx;
	font-weight: bold;
}
.tui-searchbox {
	padding: 30upx 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.tui-search-input {
	width: 100%;
	height: 66upx;
	border-radius: 35rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #f2f2f2;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

.tui-input {
	flex: 1;
	color: #333;
	padding: 0 16rpx;
	font-size: 28rpx;
}

.tui-input-plholder {
	font-size: 28rpx;
	color: #b2b2b2;
}

.tui-cancle {
	color: #888;
	font-size: 28rpx;
	padding-left: 30rpx;
	flex-shrink: 0;
}
/* 历史搜索 */
.tui-history-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
}
.tui-search-title {
	font-size: 28rpx;
	font-weight: bold;
}
.tui-icon-delete {
	padding: 10rpx;
}
.tui-history-content {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.tui-circle {
	background-color: #f2f2f2;
	padding: 14upx 20upx;
	margin: 0 20upx 20upx 0;
}
.productStock {
	color: #f22222;
	font-size: 24rpx;
	margin-left: 30rpx;
}
</style>
